<template>
  <div style="display: inline-block" @click.stop>
    <el-popover ref="popover" placement="bottom" title="查询条件" width="300" trigger="click">
      <!-- 单个文本框 -->
      <div v-if="filterType == 'text'">
        <el-input v-model.trim="conditions.text" size="mini" clearable placeholder="请输入查询内容"
          @keyup.native.enter="confirm()" />
      </div>
      <!-- 数值范围 -->
      <div v-else-if="filterType == 'number'">
        <el-input v-model.trim="conditions.number1" size="mini" clearable type="number" step="0.01"
          placeholder="请输入开始数值" />
        <el-input v-model.trim="conditions.number2" size="mini" clearable step="0.01" style="margin-top: 10px"
          placeholder="请输入结束数值" />
      </div>
      <!-- 日期-->
      <div v-else-if="filterType == 'date'">
        <el-date-picker v-model="conditions.date1" type="date" clearable size="mini" placeholder="开始时间"
          value-format="yyyy-MM-dd" />
        <el-date-picker v-model="conditions.date2" style="margin-top: 10px" type="date" size="mini" clearable
          placeholder="结束时间" value-format="yyyy-MM-dd" />
      </div>
      <!-- 下拉框-->
      <div v-else-if="filterType == 'select'">
        <el-select v-model="conditions.select" placeholder="请选择" filterable size="mini" clearable>
          <el-option v-for="(item, index) in customArrList" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <!-- 下拉复选框-->
      <div v-else-if="filterType == 'selectMore'">
        <el-select v-model="conditions.selectMore" placeholder="请选择" filterable size="mini" multiple clearable>
          <el-option v-for="(item, index) in customArrList" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <!-- 复选框-->
      <div v-else-if="filterType == 'checkbox'">
        <el-checkbox :indeterminate="isCheckboxIndeterminate" v-model="checkAll"
          @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="conditions.checkbox" @change="handleCheckedChange">
          <el-checkbox v-for="(item, index) in customArrList" :key="index" :label="item.value">{{ item.label
            }}</el-checkbox>
        </el-checkbox-group>
      </div>
      <!--单选按钮-->
      <div v-else-if="filterType == 'radio'">
        <el-radio-group v-model="conditions.radio">
          <el-radio v-for="(item, index) in customArrList" :key="index" :label="item.value" border size="mini">{{
            item.label }}</el-radio>
        </el-radio-group>
      </div>
      <!-- confirm 确定框-->
      <div class="text-right mgt10" style="padding-top: 10px;">
        <el-button type="warning" size="mini" @click="reset">重置</el-button>
        <el-button type="primary" size="mini" @click="confirm">确定</el-button>
      </div>
      <!-- 标题-->
      <span slot="reference" onselectstart="return false" oncontextmenu="return false" :class="labelColor">
        <div style="display: flex;">
          {{ column.label }}
          <div v-if="renderHeader">
            <el-tooltip class="tooltip" effect="dark" placement="right">
              <ul slot="content">
                <li>{{ renderHeader }}</li>
              </ul>
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
          &nbsp;<i /><i class="el-icon-caret-bottom"></i>
        </div>
      </span>
    </el-popover>
  </div>
</template>
<script>
export default {
  name: 'FilterHeader',
  props: {
    column: {
      type: Object,
      defalut: null
    },
    fieldTitle: {
      type: String,
      defalut: ''
    },
    fieldName: {
      type: String,
      defalut: ''
    },
    filterType: {
      type: String,
      defalut: 'txt'
    },
    customArrList: {
      type: Array,
      defalut: []
    },
    renderHeader: {
      type: String,
      defalut: ''
    },
  },
  data() {
    return {
      conditions: {
        text: '',
        number1: '',
        number2: '',
        date1: '',
        date2: '',
        select: '',
        selectMore: [],
        checkbox: [],
        radio: '',
      },
      isCheckboxIndeterminate: false,
      checkAll: false,
    }
  },
  computed: {
    // 有条件的话高亮显示标题
    labelColor() {
      switch (this.filterType) {
        case 'text':
          if (this.conditions.text) { return 'heighLight' }
          return ''
        case 'number':
          if (this.conditions.number1 || this.conditions.number2) { return 'heighLight' }
          return ''
        case 'date':
          if (this.conditions.date1 || this.conditions.date2) { return 'heighLight' }
          return ''
        case 'select':
          if (this.conditions.select) { return 'heighLight' }
          return ''
        case 'selectMore':
          if (this.conditions.selectMore.length > 0) { return 'heighLight' }
          return ''
        case 'checkbox':
          if (this.conditions.checkbox.length > 0) { return 'heighLight' }
          return ''
        case 'radio':
          if (this.conditions.radio !== '') { return 'heighLight' }
          return ''
      }
      return ''
    }
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkAll = val ? true : false;
      this.conditions.checkbox = val ? this.customArrList.map(item => item.value) : [];
      this.isCheckboxIndeterminate = false;
    },
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.customArrList.length;
      this.isCheckboxIndeterminate = checkedCount > 0 && checkedCount < this.customArrList.length;
    },
    confirm() {
      this.$refs.popover.doClose()
      this.$emit('tableFilter', {
        filterType: this.filterType,
        fieldName: this.fieldName,
        conditions: this.conditions
      })
      this.$emit("getPost", 1)
    },
    reset() {
      switch (this.filterType) {
        case 'text':
          this.conditions.text = ''
          break
        case 'number':
          this.conditions.number1 = ''
          this.conditions.number2 = ''
          break
        case 'date':
          this.conditions.date1 = ''
          this.conditions.date2 = ''
          break
        case 'select':
          this.conditions.select = ''
          break
        case 'selectMore':
          this.conditions.selectMore = []
          break
        case 'checkbox':
          this.conditions.checkbox = []
          this.checkAll = false
          this.isCheckboxIndeterminate = false;
          break
        case 'radio':
          this.conditions.radio = ''
          break
      }
      this.$refs.popover.doClose()
      this.$emit('resetFilter', {
        filterType: this.filterType,
        fieldName: this.fieldName,
        conditions: this.conditions
      })
      this.$emit("getPost", 2)
    }
  }
}
</script>
<style scoped>
  .label {
    user-select: none;
  }
  .heighLight {
    color: #409eff;
  }
  .filter-radio{
    display: flex;justify-content: space-between;flex-wrap: wrap;
    .el-radio{width: 45%;margin-right: 0}
  }
</style>